<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>营销管理</el-breadcrumb-item>
    <el-breadcrumb-item>广告位置</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="7">
        <el-input placeholder="请输入广告位置名称" v-model="query">
          <el-button slot="append" @click="serch" icon="el-icon-search">搜索</el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addAd">添加</el-button>
      </el-col>
      <el-col :span="7">
        <el-button type="primary" @click="serchs">刷新</el-button>
      </el-col>
    </el-row>
    <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="id"

      >
      </el-table-column>
      <el-table-column
          prop="type"
          label="类型"

      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="广告位置名称"

      >
      </el-table-column>
      <el-table-column
          prop="descrition"
          label="广告说明"
          >
      </el-table-column>
      <el-table-column
          prop="maxCount"
          label="广告数量"
          >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="160">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="EditAdvertise(scope.row)"  size="medium" circle></el-button>
          <el-button type="danger" icon="el-icon-delete"  @click="deleteId(scope.row)"  size="medium" circle></el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--修改弹框的 表单 -->
    <el-dialog
        title="修改用户信息"
        :visible.sync="EditDialogVisible"
        width="50%"
        @close="closeEditAd"
    >
      <el-form :model="EditFormData" status-icon :rules="EditFormRules" ref="EditRuleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="类型" prop="type">
          <el-input type="text" v-model="EditFormData.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告位置名称" prop="name">
          <el-input type="text"  v-model="EditFormData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告说明" prop="descrition">
          <el-input type="text"  v-model="EditFormData.descrition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告数量" prop="maxCount">
          <el-input type="text" v-model="EditFormData.maxCount" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="EditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEditAd">确 定</el-button>
        </span>
    </el-dialog>

    <!--添加弹框的 表单 -->
    <el-dialog
        title="添加用户信息"
        :visible.sync="AddDialogVisible"
        width="50%"
        @close="closeAddAd"
    >
      <el-form :model="AddFormData" status-icon :rules="AddFormRules" ref="AddRuleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="类型" prop="type">
          <el-input type="text" v-model="AddFormData.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告位置名称" prop="name">
          <el-input type="text"  v-model="AddFormData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告说明" prop="descrition">
          <el-input type="text"  v-model="AddFormData.descrition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告数量" prop="maxCount">
          <el-input type="text" v-model="AddFormData.maxCount" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="AddDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddAd">确 定</el-button>
        </span>
    </el-dialog>
  </el-card>

</div>
</template>

<script>
export default {
name: "advertisePosition",
  data(){

      return{
        //查询条件
        query:"",
        //当前显示的页码
        currentPage: 1,
        //总条数
        total: 0,
        //每页显示的记录
        pageSize: 5,
        //当前的记录数据
        tableData: [],
        //是否打开修改弹框 true 打开 false 关闭
        EditDialogVisible: false,

        //修改弹框表单的数据
        EditFormData:{},
        //是否打开 添加弹框
        AddDialogVisible: false,
        //添加表单的数据
        AddFormData:{},
        //修改弹框 表单的 规则
        EditFormRules: {
          type: [
            {required: true, message: "类型不能为空", trigger: "blur"}
          ],

          name: [
            {required: true, message: "广告位置不能为空", trigger: "blur"},
          ],
          descrition: [
            {required: true, message: "广告说明不能为空", trigger: "blur"},
          ],
          maxCount: [
            {required: true, message: "广告说明不能为空", trigger: "blur"},
            {min: 1, max: 10, message: "请输入1到10位数字", trigger: "blur"},
          ]
        },
        //添加弹框 表单的 规则
        AddFormRules:{
          type: [
            {required: true, message: "类型不能为空", trigger: "blur"}
          ],

          name: [
            {required: true, message: "广告位置不能为空", trigger: "blur"},
          ],
          descrition: [
            {required: true, message: "广告说明不能为空", trigger: "blur"},
          ],
          maxCount: [
            {required: true, message: "广告说明不能为空", trigger: "blur"},
          ]
        }
    }
    },
    created() {
      this.initAdTable(this.currentPage,this.pageSize);
    },
    methods: {
     //刷新
      serchs(){
        this.query="";
        this.initAdTable(this.currentPage,this.pageSize);
      },


      //删除
      deleteId(id){
        var that=this;
        this.$confirm('是否删除广告位置:'+id.name+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$http.post(`/marketing/tbAdvertisePosition/deletePositionById/${id.id}`).then(function(res){
            if (res.data.code == 200){
              that.$message.success(res.data.msg);
              that.initAdTable(that.currentPage,that.pageSize);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //修改每页几条的方法
      handleSizeChange(val) {
        this.pageSize=val;
        this.initAdTable(this.currentPage,this.pageSize);
      },
      //修改页数的方法
      handleCurrentChange(val) {
        this.currentPage=val;
        this.initAdTable(this.currentPage,this.pageSize);
      },
      //模糊查询按钮的方法
      serch(){
        this.initAdTable(this.currentPage,this.pageSize);
      },
      //初始化表格的方法
      initAdTable(currentPage,pageSize){
        var that=this;
        this.$http.post(`/marketing/tbAdvertisePosition/findAdvertiserPositionByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function(resp){
          if(resp.data.code===200){
            that.tableData=resp.data.data.records;
            that.total=resp.data.data.total;
          }else{
            that.$message.error("用户加载失败");
          }
        });
      },
      //修改弹框回显的方法
      EditAdvertise(row){
        this.EditDialogVisible = true;
        this.EditFormData=row;
        //console.log(userId);
        var that = this;
        this.$http.get(`/marketing/tbAdvertisePosition/getAdvertisePositionById/${row.id}`).then(function (res){
          that.EditFormData=res.data.data;
        })
      },
      //提交修改弹框的方法
      confirmEditAd(){
        var that = this;
        this.$refs['EditRuleForm'].validate((valid) => {
          if (valid) {
            that.$http.put("/marketing/tbAdvertisePosition/updateAdvertisePosition",this.EditFormData).then(function (res){
              if (res.data.code == 200){
                that.$message.success("修改成功");
                that.EditDialogVisible=false;
                that.initAdTable(that.currentPage,that.pageSize);
              }else{
                that.$message.error("修改失败");
              }
            })
          }
        })
      },
      //添加按钮的弹框的方法
      addAd(){
        this.AddDialogVisible=true;
      },
      //提交添加表单的方法
      confirmAddAd(){
        //console.log(this.AddFormData);
        var that = this;
        this.$http.post("/marketing/tbAdvertisePosition/addPositon",this.AddFormData).then(function (res){
          if (res.data.code==200){
            //console.log(res);
            that.$message.success(res.data.msg);
            that.AddDialogVisible=false;
            that.initAdTable(that.currentPage,that.pageSize);
          }else{
            that.$message.error(res.data.msg);
          }
        })
      },
      //修改弹窗关闭时触发的事件
      closeEditAd(){
        this.$refs.EditRuleForm.resetFields();
      },
      //添加弹框关闭时触发的事件
      closeAddAd(){
        this.$refs.AddRuleForm.resetFields();
      }
      }

}
</script>

<style scoped>

</style>